/*
 * @Author: zhengchao
 * @Date: 2021-11-03 10:16:44
 * @LastEditors: zhengchao
 * @LastEditTime: 2021-12-10 16:36:04
 * @Description: 
 * @FilePath: \nocode-react-ts\src\components\boxs\renderForm.tsx
 */
import React, { memo, useMemo, useState, useEffect } from 'react'
import schemas from './schema'
import { Form, Input, InputNumber, Select } from 'antd';

const { Option } = Select;

const RenderForm = (props: any) => {
  const vals = props.boxVals || {}
  // console.log(schemas)
  const [editData, seteditData] = useState<any>([])
  // const [config, setconfig] = useState<any>([])
  // let editData: any[] = []
  const [form] = Form.useForm();

  useEffect(() => {
    const schemasConfigs = schemas[vals.id as keyof typeof schemas]
    // editData = schemasConfigs?.editData || []
    // config = schemasConfigs?.config || {}
    seteditData(schemasConfigs?.editData || [])
    // setconfig(schemasConfigs?.config)
    // console.log(editData, config, '((')
    form.setFieldsValue(vals.config);
  }, [vals.uid])

  // if (vals.id) {
  //   const schemasConfigs = schemas[vals.id as keyof typeof schemas]
  //   editData = schemasConfigs?.editData || []
  //   // const editDatas = schemasConfigs?.editData || []
  //   // seteditData(editDatas)
  //   // config = schemasConfigs?.config || {}
  //   setconfig(schemasConfigs?.config || {})
  //   console.log(editData, config, '((')
  // }

  const handlechange = (val: any) => {
    props.onSave && props.onSave(form.getFieldsValue(), vals)
  }

  return <div style={{ padding: '0 24px' }}>
    <div className="box-title">属性设置</div>
    <Form
      name="form"
      form={form}
      labelCol={{ span: 8 }}
      // initialValues={config}
      wrapperCol={{ span: 16 }}
      onValuesChange={handlechange}
    >
      {
        editData.map((i: any, index: number) => {
          return (
            <React.Fragment key={index}>
              {i.type === "Text" && (
                <Form.Item
                  colon={false}
                  labelAlign='left'
                  label={i.name}
                  name={i.key}
                >
                  <Input />
                </Form.Item>
              )}

              {i.type === "Number" && (
                <Form.Item
                  colon={false}
                  labelAlign='left'
                  label={i.name}
                  name={i.key}
                >
                  <InputNumber size="small" />
                </Form.Item>
              )}

              {i.type === "Select" && (
                <Form.Item
                  colon={false}
                  labelAlign='left'
                  label={i.name}
                  name={i.key}
                >
                  <Select>
                    {i.range.map((j: any, index: number) => {
                      return <Option value={j.key} key={index}>{j.text}</Option>
                    })}
                  </Select>
                </Form.Item>
              )}
            </React.Fragment>
          )
        })
      }
    </Form>

    {!vals.id && '无'}
  </div>
}

export default RenderForm